<template>
    <div class="trip-search-container">
      <h2>车次查询</h2>
      <div class="form-group">
        <label for="departure">出发地</label>
        <input type="text" v-model="searchParams.departure" id="departure" required>
      </div>
      <div class="form-group">
        <label for="destination">目的地</label>
        <input type="text" v-model="searchParams.destination" id="destination" required>
      </div>
      <div class="form-group">
        <label for="departureTime">出发时间</label>
        <input type="datetime-local" v-model="searchParams.departureTime" id="departureTime" required>
      </div>
      <button @click="searchTrips" class="btn btn-primary">查询</button>
      <ul v-if="trips.length > 0">
        <li v-for="trip in trips" :key="trip.id">
          <p>车次号: {{ trip.tripNumber }}</p>
          <p>出发地: {{ trip.departure }}</p>
          <p>目的地: {{ trip.destination }}</p>
          <p>出发时间: {{ formatTime(trip.departureTime) }}</p>
          <button @click="bookTrip(trip.id)">预订</button>
        </li>
      </ul>
      <p v-if="noTripsMessage" class="text-danger">{{ noTripsMessage }}</p>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        searchParams: {
          departure: '',
          destination: '',
          departureTime: ''
        },
        trips: [],
        noTripsMessage: ''
      };
    },
    methods: {
      searchTrips() {
        axios.get('/api/trips', {
          params: this.searchParams
        })
       .then(response => {
            this.trips = response.data;
            if (this.trips.length === 0) {
              this.noTripsMessage = '暂无符合条件的车次';
            }
          })
       .catch(error => {
            console.log(error);
        });
      },
      bookTrip(tripId) {
        // 跳转到车票预订页面并传递车次ID等必要信息（假设预订页面路由是 /book-trip）
        this.$router.push({
          path: '/book-trip',
          query: {
            tripId: tripId
          }
        });
      },
      formatTime(time) {
        // 格式化时间显示的辅助函数，可根据实际需求完善
        return new Date(time).toLocaleString();
      }
    }
  };
  </script>
  
  <style scoped>
  .trip-search-container {
    width: 500px;
    margin: 0 auto;
    padding: 20px;
  }
  </style>